<template>
  <div>

	<myheader></myheader>

	<br /><br />

	<Breadcrumb :datas="datas"></Breadcrumb>


	<section class="featured-block text-center">
		<div class="container">
			<div>
				<span><span>根据添加的文件类型自动显示</span></span>

				<div v-show="pic_url !=''" >
				<Avatar :src="pic_url" :width="150" fit = "fill" >
				</Avatar>

				<!-- controls 提供添加播放器  -->
				<!-- autoplay 自动播放   -->
				
					<audio :src="audio_url" controls v-show="audio_url !=''">
					</audio>
				
					<video 
						v-show="video_url !=''"
						:src="video_url"
						controls
						autoplay
						:width="200"
						:height="100"
					></video>
				

				</div>

				<br><br>

				新密码:<input type="text" v-model="password">

				<br><br>


				上传图片：<input type="file" @change="upload">
				

				<br><br>

				{{ imgLoadPercent }}

				七牛云上传:<input type="file" @change="upload_qiniu">

				<br> <br>

				<Button clocr="blue" @click="submit">提交</Button>

				
			</div>


		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>  
</template>


 

<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
	data () {
		return {
		//面包屑导航
		datas:[{title:'首页',route:{name:'index'}},{title:'我的主页'}],
		msg: "这是一个变量",
		filename:'',
		uid:localStorage.getItem('uid'),
		pic_typy:['bmp','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','psd','cdr','pcd','dxf','ufo','eps','ai','raw','WMF','webp'],
		pic_url:"",
		uptoken:'',
		video_type:['mp4','mov','avi','3gp','flv','rmvb','rm'],
		video_url:'',
		audio_type:['mp3','cda','wav','wma','ra','midi','ogg','ape','plac','aac'],
		audio_url:'',
		//上传进度条
		imgLoadPercent:'',
		//原始路径
		mysrc:'',
		//密码
		password:'',
		ss:'',
		
		
		}
	},


	//定义组件
	components:{
		'myheader':myheader,
		'myfooter':myfooter
	},


  	mounted:function(){
		//获取密钥
			this.get_token()

		//获取头像url
		this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem('uid')}}).then((res)=>{
			console.log(res)
			this.pic_url = 'http://localhost:8000/static/upload/' + res.data.data[0].img
		})

	},


	methods:{

		//提交用户修改
		submit:function(){
			//判断密码是否为空
			if(this.password==""){
				this.$Message('密码不能为空')
				return false
			}

			//判断上传照片是否位空
			if(this.mysrc==""){
				this.$Message('上传图片不能空')
				return false
			}

			//向后台发送请求
				this.axios.patch('http://localhost:8000/updateuser/',{uid:localStorage.getItem('uid'),
				img:this.mysrc,password:this.password}).then((res)=>{
				console.log(res);
				if(res.data.code==200){
					this.$Message('修改成功')
					this.$router.go(0)
				}else{
					this.$Message('修改失败')
				}
				
			})
			
			
		},


		//上传七牛云
		upload_qiniu:function(e){

		// 	//声明文件对象
			let file = e.target.files[0]
		// 	//什么参数类型
			let param = new FormData()
		// 	//添加文件
			param.append('file',file)
			param.append('token',this.uptoken)

		// 	//定制axios请求
		////跨域请求是否提供凭据信息
			const axios_qiniu = this.axios.create({withCredentials:false});

			axios_qiniu({

				method:'POST',
				url:'http://up-z2.qiniu.com/',
				data:param,
				timeout:30000,
				//上传进度捕捉方法  下载进度：onDownload
				onUploadProgress: (e)=> {
				//imgLoadPercent 是上传进度，可以用来添加进度条

					//计算进度
					var complete = (e.loaded / e.total);

					if (complete < 1) {
					
						this.imgLoadPercent = (complete *100).toFixed(2)+ '%';

					}


					},
				}).then(data =>{
					console.log(data);
					this.imgLoadPercent = '100%';
				}).catch(function(err) {
					//上传失败
				});
			},
		


		//获取令牌方法
		get_token:function(){

			//向后台发送请求
			this.axios.get('http://localhost:8000/uptoken/').then((res)=>{
			console.log(res);

			//动态赋值
			this.uptoken = res.data.uptoken

			})
		},
		

		//上传图片方法
		// e  file内置的传参
		upload:function(e){
			//声明文件对象                  //lastModified:1478486422000  , File ,__proto__:File,lastModifiedDate:Mon Nov 07 2016 10:40:22 GMT 0800 (CST)
			let file = e.target.files[0]  //file 可以得到file如下参数:name:"222.jpg",size:124996,type:"image/jpeg",webkitRelativePath:"",
			//什么参数类型
			let param = new FormData()
			//添加文件
			param.append('file',file)
			//声明上传文件头部 
			//Content-Type 存在于请求和响应的头部，用于标识数据的类型。(通俗地说就是 , 你想要后台返回给你什么数据类型, 后台需要你发送什么样的数据类型给他)
			let config = {'Content-Type':'multipart/form-data'}  //指定传输数据为二进制数据，例如图片、mp3、文件


			//向后台发送请求
			this.axios.post('http://localhost:8000/uploadfile/',param,config).then((res)=>{
			console.log(res);

			//判断文件类型 并给与动态赋值  
			// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
			if(this.video_type.indexOf(file.name.split('.')[1]) !== -1 ){
				this.video_url = 'http://localhost:8000/static/upload/' +res.data.filename
			}else if(this.audio_type.indexOf(file.name.split('.')[1]) !==-1){
				this.audio_url = 'http://localhost:8000/static/upload/' +res.data.filename
			}else if(this.pic_typy.indexOf(file.name.split('.')[1]) !==-1){
				this.pic_url = 'http://localhost:8000/static/upload/' +res.data.filename
				this.mysrc = res.data.filename
			}

			

			})
	  	},
	}
	
     
 
 


}
</script>
 
<style>



</style>